<template>
    <div class='header'>
        <div class='header-left'>
            <i class="iconfont">&#xe624;</i>
        </div>
        <div class='headr-input'>
            <i class="iconfont">&#xe632;</i>
            输入城市/地名
            <!-- <input type="search" class="write" placeholder="输入城市/地名"> -->
        </div>
        <router-link to='/city'>
           <div class="header-right">
                {{this.city}}
               <i class="iconfont">&#xe62d;</i></div>
        </router-link>
    </div>
</template>
<script>
import {mapState,mapGetters} from 'vuex'
export default {
   name:"AppHeader",
   computed:{
       ...mapState(["city"]),
       ...mapGetters(["doubleCity"])
   }
}
</script>
<style lang="scss" scoped>
@import '~styles/iconfont.css';
@import "~styles/_parameters.scss";
  .header{
      display:flex;
      background-color:$bgColor;
      color:#fff;
      height:.86rem;
      line-height:.86rem;
  }
  .header-left{
      width:.86rem;
      text-align:center;
  }
  .header-right{
      min-width:1.1rem;
      color:#fff;
      .iconfont{
          font-size:small;
          display:inline-block;
          margin-left:.1rem;
      }
  }
  .headr-input{
      flex:1;
      height:.66rem;
      line-height:.66rem;
      border-radius:.1rem;
      background-color:#fff;
      color:#ccc;
      margin:.1rem;
      text-align:left;
      padding-left:0.1rem;
      input{
          height:100%;
      }
  }
</style>